<template>
    <div class="login_container">
        <div class="login_box">
            <div class="login_right">
                <div class="login_form">
                    <el-form
                        :model="loginForm"
                        :rules="loginFormRules"
                        ref="loginFormRef"
                    >
                        <h2>登录</h2>
                        <p>账号</p>
                        <el-form-item prop="username">
                            <el-input
                                prefix-icon="iconfont icon-user"
                                v-model="loginForm.username"
                                placeholder="请输入用户名"
                            ></el-input>
                        </el-form-item>
                        <p>密码</p>
                        <el-form-item prop="password">
                            <el-input
                                prefix-icon="iconfont icon-3702mima"
                                v-model="loginForm.pwd"
                                show-password
                                type="password"
                                placeholder="请输入密码"
                                auto-complete="new-password"
                            ></el-input>
                        </el-form-item>
                        <div class="login_a">
                            <a @click="resLoginForm">重置</a>
                            &nbsp;
                            <a href="#/forget">忘记密码</a>
                        </div>

                        <div class="btn">
                            <el-button type="primary" @click="login"
                                >登录</el-button
                            >
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { loginFunApi } from "@/api/loginApi.js"
export default {
    data() {
        return {
            loginForm: {
                username: "",
                pwd: "",
            },
            loginFormRules: {
                username: [
                    {
                        required: true,
                        message: "请输入账户名",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 6,
                        max: 15,
                        message: "长度在 6 到 15 个字符",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    methods: {
        resLoginForm() {
            this.$refs.loginFormRef.resetFields()
            this.loginForm.pwd=""
        },

        login() {
            this.$refs.loginFormRef.validate((valid) => {
                if (valid) {
                    loginFunApi(this.loginForm).then((res) => {
                        if (res.code == 200) {
                            // console.log(res.data);
                            window.sessionStorage.setItem("token", res.data)
                            this.$message.success(res.msg)
                            this.$router.push("/").catch(err => err)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.error("账户密码验证不通过")
                    return false
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.login_container {
    background: url(../../assets/images/Denglu/beijing.png);
    background-size: 100% 100%;
    height: 100%;
}
.login_box {
    width: 650px;
    height: 380px;
    background-color: #fff;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../../assets/images/Denglu/denglu_03.png);
    background-size: 100% 100%;
}
.login_right {
    width: 50%;
    height: 100%;
    float: right;
    .login_form {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 40px;
        h2 {
            font-size: 20px;
            padding: 40px 0;
        }
        p {
            font-size: 12px;
            padding: 15px 0;
        }

        .el-form-item {
            margin-bottom: 10px;
        }
        .login_a {
            text-align: right;
            padding-bottom: 10px;
        }
        a {
            text-decoration: none;
            font-size: 12px;
            cursor: pointer;
        }
    }
}
.btn {
    width: 100%;
    height: 35px;
    .el-button {
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 12px;
    }
}
/deep/.el-input__inner {
    padding-left: 10px !important;
    height: 30px;
}
</style>
